<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<html>
	<head>
		<script type="text/javascript"
			src="<%=request.getContextPath()%>/js/JQuery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/galleria/galleria.js"></script>
		<style>
            html,body{background:#111}
            .content{color:#ccc;font:14px/1.4 arial,sans-serif;width:600px;margin:20px auto}
            h1{line-height:1.1;letter-spacing:-1px;}
            #galleria{height:400px;}
            a{color:#aaa;}
        </style>
	</head>
<body>
    <div class="content">
        <h1>Extending Galleria with options, custom thumbnails, HTML captions and a lightbox popup</h1>
        <div id="galleria">
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/2/2b/Frederic_fontaine_1.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Frederic_fontaine_1.jpg/120px-Frederic_fontaine_1.jpg">
                </a>
                <!-- you can add html captions like this and define them in the data_config option: -->
                <strong>Swamp ipsum</strong>
                <span>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing <em>elit</em>. Etiam quam velit, aliquet nec sodales vel, porttitor id justo. </span>
            
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/800px-Basket_of_strawberries_red_accent.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/120px-Basket_of_strawberries_red_accent.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Ns1-unsharp.jpg/120px-Ns1-unsharp.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/800px-Laser_effects.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/120px-Laser_effects.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/800px-PizBernina3.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/120px-PizBernina3.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/800px-La_Galera_2.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/150px-La_Galera_2.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/800px-Costa_rica_santa_elena_skywalk.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/150px-Costa_rica_santa_elena_skywalk.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/800px-Kuznetsk_Alatau_3.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/150px-Kuznetsk_Alatau_3.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/800px-Smoky_forest.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/150px-Smoky_forest.jpg">
                </a>
            </div>
            <div>
                <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/150px-Alcea_rosea_and_blue_sky.jpg">
                </a>
            </div>
        </div>
        <p>You can use the <code>data_config</code> option to define where to fetch the html caption for each image. This example will also bind a click event to each image and open a lightbox when clicked.</p>
        <p>View source for comments and code.</p>
    </div>
 
    <script>
    
    // Load theme
    Galleria.loadTheme('<%=request.getContextPath()%>/js/galleria/themes/classic/galleria.classic.js');
    
    // run galleria and add some options
    $('#galleria').galleria({
        image_crop: true, // crop all images to fit
        thumb_crop: true, // crop all thumbnails to fit
        transition: 'fade', // crossfade photos
        transition_speed: 700, // slow down the crossfade
        data_config: function(img) {
            // will extract and return image captions from the source:
            return  {
                title: $(img).parent().next('strong').html(),
                description: $(img).parent().next('strong').next().html()
            };
        },
        extend: function() {
            this.bind(Galleria.IMAGE, function(e) {
                // bind a click event to the active image
                $(e.imageTarget).css('cursor','pointer').click(this.proxy(function() {
                    // open the image in a lightbox
                    this.openLightbox();
                }));
            });
        }
    });
    </script>
    </body>
</html>

<!-- <body>
		 <div class="content">
        <h1>A classic Galleria gallery</h1>
        <div id="galleria">
            <img title="Image title" alt="Image description is fetched from the alt attribute per default." src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Frederic_fontaine_1.jpg/500px-Frederic_fontaine_1.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
        </div>
        <p>This example is a classic gallery that fetches image data from a list of IMG elelments and generates thumbnails. 
            If the thumbnail’s total width exceeds the containing width, Galleria automatically adds a carousel (unless disabled).
            Galleria automatically adjusts it’s width to the containing element’s size.</p>
    </div>
		<script>
    
    // Load the classic theme
    Galleria.loadTheme('<%=request.getContextPath()%>/js/galleria/themes/classic/galleria.classic.js');

    // Initialize Galleria
    $('#galleria').galleria();
    
    </script>
	</body>
</html>
 -->	
